<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			#box2
			{
				background-color: aqua;
				width: 500px;
				height: 500px;
			}
			#box1
			{
				background-color: aqua;
				width: 100px;
				height: 100px;
				 position: absolute;   /* 这里开启定位是干嘛的*/
			}
			body
			{
				width: 2000px;
				height: 2000px;
			}
		</style>
       <script type="text/javascript">  //因为冒泡，如果再写一个div因为冒泡才能进入那个div
		   window.onload=function()
		   {
			   
			   var box1=document.getElementById("box1");
			document.onmousemove=function(event)
			{
				event=event||window.event;
				var yt=document.body.scrollTop|| document.documentElement.scrollTop;  //解决兼容问题
			    var xt=document.body.scrollLeft||document.documentElement.scrollLeft;  //火狐浏览器认为是html其他浏览器认为是body
				 var x=event.clientX;  //clientX和clientY用于获取鼠标在当前可见窗口的坐标 
				 var y=event.clientY;  //div和pageX和pageY是相当于整个页面的，但pageX这种ie8以及以下不支持
				 box1.style.left=x+xt+"px";
				 box1.style.top=y+yt+"px";
			}
			var box2=document.getElementById("box2");
			box2.onmousemove=function(event)
			{
				event=event||window.event;
				event.cancelBubble=false;
			}
		   }
       	    
       </script>	
	</head>
	<body >
		<div id="box1"></div>
		<div id="box2"></div>
	</body>
</html>